<template>
  <!-- :expandedKeys.sync="expandedKeys" 默认打开的节点设置 -->
  <a-tree :tree-data="treeData" :expandedKeys.sync="expandedKeys">
    <template #title="{ key: treeKey, title }">
      <a-dropdown :trigger="['contextmenu']">
        <span>{{ title }}1111</span>
        <template #overlay>
          <a-menu
            @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)"
          >
            <a-sub-menu key="sub1">
              <span slot="title">添加</span>
              <a-menu-item key="1"> 设备 </a-menu-item>
              <a-menu-item key="2"> 平面图 </a-menu-item>
              <a-menu-item key="3"> 结构图 </a-menu-item>
              <a-menu-item key="4"> 设备列表 </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub2">
              <span slot="title">移动</span>
              <a-menu-item key="5"> 上移 </a-menu-item>
              <a-menu-item key="6"> 下移 </a-menu-item>
              <a-menu-item key="7"> 升级 </a-menu-item>
              <a-menu-item key="8"> 降级 </a-menu-item> </a-sub-menu
            ><a-sub-menu key="sub3">
              <span slot="title">导出</span>
              <a-menu-item key="9"> 设备信息 </a-menu-item>
              <a-menu-item key="10"> 点位信息 </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub4">
              <span slot="title">导入</span>
              <a-menu-item key="9"> 设备信息 </a-menu-item>
              <a-menu-item key="10"> 点位信息 </a-menu-item>
            </a-sub-menu>
            <a-menu-item key="11">绑定设备定义</a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </template>
  </a-tree>
</template>
<script>
const treeData = [
  {
    title: "总系统",
    key: "0-0",
    children: [
      {
        title: "子系统",
        key: "0-0-0",
        children: [
          { title: "子系统A", key: "0-0-0-0" },
          {
            title: "子系统B",
            key: "0-0-0-1",
            children: [
              { title: "F1", key: "0-0-0-0",children: [
              { title: "设备1", key: "0-0-0-0",
             },
              { title: "设备2", key: "0-0-0-1" },
              { title: "平面图", key: "0-0-0-2" },
              { title: "设备列表", key: "0-0-0-3" },
            ],
             },
              { title: "F2", key: "0-0-0-1" },
              { title: "F3", key: "0-0-0-2" },
            ],
          },
          { title: "子系统C", key: "0-0-0-2" },
        ],
      },
      {
        title: "子系统",
        key: "0-0-1",
        children: [
          { title: "0-0-1-0", key: "0-0-1-0" },
          { title: "0-0-1-1", key: "0-0-1-1" },
          { title: "0-0-1-2", key: "0-0-1-2" },
        ],
      },
    ],
  },
];
export default {
  data() {
    return {
      treeData,
      expandedKeys: ["0-0-0", "0-0-1"],
    };
  },
  methods: {
    onContextMenuClick(treeKey, menuKey) {
      console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
    },
  },
};
</script>
